<template>
  <div class="home-shortcut-container">
    <el-row :gutter="10">
      <el-col v-for="shortcut in shortcuts" :key="shortcut.router" :span="3">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <el-link
            v-hasPermi="[shortcut.permission]"
            class="shortcut-link"
            @click="handleShortcutRedirect(shortcut.router)"
          >
            <el-badge :value="shortcut.badge" class="item">
              <svg-icon
                :icon-class="shortcut.icon"
                class-name="card-panel-icon"
              ></svg-icon>
              <div class="shortcut-text">
                <span>{{ shortcut.name }}</span>
              </div>
            </el-badge>
          </el-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getShortcut } from "@/api/hades/index/shortcut";

export default {
  name: "ShortcutDashboard",
  data() {
    return {
      shortcuts: [
        // {
        //   name: "例子1",
        //   icon: "apply",
        //   router: "AssetApply",
        //   badge: "1",
        //   permission: "",
        // },
        // {
        //   name: "例子2",
        //   icon: "user",
        //   router: "Lease",
        //   badge: "2",
        //   permission: "",
        // },
      ],
    };
  },
  activated() {
    this.loadShortcuts();
  },
  mounted() {
    this.loadShortcuts();
  },
  created() {},
  methods: {
    loadShortcuts() {
      getShortcut(this.queryParams).then((response) => {
        this.shortcuts = response.data;
      });
    },
    handleShortcutRedirect(router) {
      // this.$router.push({ name: router });
      this.$router.push({ name: router, params: { approve: "waiting" } });
    },
  },
};
</script>
<style>
.home-shortcut-container .shortcut-link {
  display: block;
  padding: 10px 0px;
  text-align: center;
}
.home-shortcut-container .card-panel-icon {
  width: 36px;
  height: 36px;
  padding: 5px;
}
.home-shortcut-container .shortcut-text {
  padding-top: 5px;
  text-align: center;
  font-size: 14px;
}
</style>
